<template>
  <div id="box">
    <h3>管理员列表</h3>
    <el-table :data="items"> 
      <el-table-column prop="_id" label="ID" width="270" />
      <el-table-column prop="username" label="管理员名称" />
      <el-table-column
          fixed="right"
          label="操作"
          width="180">
        <template slot-scope="scope">
          <el-button 
              type="primary" 
              size="mini" 
              @click="$router.push(`/admin-user/edit/${scope.row._id}`)">
            编辑
          </el-button>
          <el-button 
              type="danger" 
              size="mini"
              @click="delItem(scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    name: 'AdminUserList',
    data() {
      return {
        items: [],
      }
    },
    created() {
      this.fetch();
    },
    methods: {
      async fetch() {
        try {
          const res = await this.$http.get('/rest/admin-users')
          this.items = res.data
        } catch(err) {
          console.log('获取数据失败');
          console.log(err);
        } 
      },
      async delItem(row){
        try {
          this.$confirm(`确认删除  "${row.name}"？`, "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
          .then(async() => {
            const res = await this.$http.delete(`/rest/admin-users/${row._id}`);
            this.$message({
              type: 'success',
              message: '删除成功'
            })
            this.fetch();
          })
        } catch(err) {
          console.log('删除列表失败');
        }
      }
    }
  }
</script>

<style scoped>

</style>